<template>
    <div v-loading="true" element-loading-text="开发中" class="container">
        <!-- <div class="container"> -->
        <el-card>
            <cmsTitle no-back />
            <el-tabs v-model="activeName" @tab-click="Query">
                <el-tab-pane label="全部" />
                <el-tab-pane label="待处理" />
                <el-tab-pane label="已处理" />
            </el-tabs>
            <div class="searchbar">
                <el-button type="primary" plain @click="Export">导出Excel</el-button>
                <el-select placeholder="全部">
                    <el-option />
                </el-select>
                <el-input
                    v-model="query.serchStr"
                    placeholder="请输入用户ID/姓名/手机号码"
                    prefix-icon="el-icon-search"
                />
                <el-date-picker
                    v-model="time"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                />
            </div>
        </el-card>
        <el-card>
            <el-table :data="tableData">
                <el-table-column type="index" label="编号" />
                <el-table-column v-for="(prop,label) in header" :key="label" :label="label" :prop="prop" />
                <el-table-column width="160px" fixed="right" label="操作">
                    <template #default="{row,column,$index}">
                        <el-button disabled type="text" @click="View(row)">查看</el-button>
                        <el-button type="text" @click="Submit(row)">处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {

    },
    data () {
        return {
            activeName: '0',
            tableData: [{}],
            header: {
                反馈时间: '',
                用户ID: '',
                用户姓名: '',
                用户手机: '',
                处理结果: '',
                处理意见: ''
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit('pick', [start, end])
                        }
                    }
                ]
            },
            query: {
                serchStr: null,
                contentType: null,
                reason: null
            },
            time: []
        }
    },
    computed: {

    },
    watch: {

    },
    created () {

    },
    mounted () {

    },
    methods: {
        Query (e) {
            console.log(e)
        },
        Export () {

        },
        View (e) {
            console.log(e)
        },
        async Submit (e) {
            console.log(e)
            const val = await this.$prompt('', '处理意见', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputType: 'textarea',
                inputPattern: /\S/,
                inputErrorMessage: '处理意见不能为空'
            }).then(({ value }) => value.trim())
            console.log(val)
        }
    }
}
</script>

<style scoped lang="stylus">
.el-card
    margin-bottom 10px
.m-title
    margin-top -20px
.el-input
    width 300px
.el-select
    width 90px
.el-date-editor
    width 227px
.searchbar
    >>> .el-button
        float right
    >>> & > *
        white-space nowrap
        margin-top 10px
        margin-right 20px
        &:last-child
            margin-right 0
</style>
